﻿<div class="container" data-ng-controller="tableCtrl as tctrl">

  <div class="block-header">
    <h2>Data Tables<small>ng-table is a powerfull AngularJs ready Data Table with tons of customizable options. Read more <a target="_blank" href="http://ng-table.com/#/">here</a> for detailed documentation and HowTos...</small></h2>

    <ul class="actions m-t-20 hidden-xs">
      <li class="dropdown" dropdown>
        <a href="" dropdown-toggle>
          <i class="zmdi zmdi-more-vert"></i>
        </a>

        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <a href="">Privacy Settings</a>
          </li>
          <li>
            <a href="">Account Settings</a>
          </li>
          <li>
            <a href="">Other Settings</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="card">
    <div class="card-header">
      <h2>Basic Examples <small>With lease settings enabled.</small></h2>
    </div>

    <div class="card-body">
      <div class="table-responsive">
        <table ng-table="tctrl.tableBasic" class="table table-striped table-vmiddle">
          <tr ng-repeat="w in $data">
            <td data-title="'ID'">
              {{ w.id }}
            </td>
            <td data-title="'Name'">
              {{ w.name }}
            </td>
            <td data-title="'Email'">
              {{ w.email }}
            </td>
            <td data-title="'Username'">
              {{ w.username }}
            </td>
            <td data-title="'Contact'">
              {{ w.contact }}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h2>Column Sorting <small>Click on columns header to sort the table.</small></h2>
    </div>

    <div class="card-body">
      <div class="table-responsive">
        <table ng-table="tctrl.tableSorting" class="table table-striped table-vmiddle">
          <tr ng-repeat="w in $data">
            <td data-title="'ID'" sortable="'id'">
              {{ w.id }}
            </td>
            <td data-title="'Name'" sortable="'name'">
              {{ w.name }}
            </td>
            <td data-title="'Email'" sortable="'email'">
              {{ w.email }}
            </td>
            <td data-title="'Username'" sortable="'username'">
              {{ w.username }}
            </td>
            <td data-title="'Contact'" sortable="'contact'">
              {{ w.contact }}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h2>Column Filtering <small>Type something in filter and press Enter or Filter button</small></h2>
    </div>

    <div class="card-body">
      <div class="table-responsive">
        <table ng-table="tctrl.tableFilter" class="table table-striped table-vmiddle" show-filter="true">
          <tr ng-repeat="w in $data">
            <td data-title="'ID'" filter="{ 'id': 'text' }">
              {{ w.id }}
            </td>
            <td data-title="'Name'" filter="{ 'name': 'text' }">
              {{ w.name }}
            </td>
            <td data-title="'Email'" filter="{ 'email': 'text' }">
              {{ w.email }}
            </td>
            <td data-title="'Username'" filter="{ 'username': 'text' }">
              {{ w.username }}
            </td>
            <td data-title="'Contact'" filter="{ 'contact': 'text' }">
              {{ w.contact }}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h2>Editable <small>Click on Pencil icon to edit a row.</small></h2>
    </div>

    <div class="card-body">
      <div class="table-responsive">
        <table ng-table="tctrl.tableEdit" class="table table-striped table-vmiddle">
          <tr ng-repeat="w in $data" ng-class="{ 'active': w.$edit }">
            <td data-title="'ID'">
              <span ng-if="!w.$edit">{{ w.id }}</span>
              <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.id" /></div>
            </td>
            <td data-title="'Name'">
              <span ng-if="!w.$edit">{{ w.name }}</span>
              <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.name" /></div>
            </td>
            <td data-title="'Email'">
              <span ng-if="!w.$edit">{{ w.email }}</span>
              <div ng-if="w.$edit"><input class="form-control" type="email" ng-model="w.email" /></div>
            </td>
            <td data-title="'Username'">
              <span ng-if="!w.$edit">{{ w.username }}</span>
              <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.username" /></div>
            </td>
            <td data-title="'Contact'">
              <span ng-if="!w.$edit">{{ w.contact }}</span>
              <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.contact" /></div>
            </td>
            <td data-title="'Actions'">
              <button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="w.$edit = true"><i class="zmdi zmdi-edit"></i></button>
              <button type="button" class="btn btn-success" ng-if="w.$edit" ng-click="w.$edit = false"><i class="zmdi zmdi-check"></i></button>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>